<template>
  <div :key="id">
    <div class="flex align-items-center mb-10">
      <div class="mr-10">题目选项</div>
      <el-button circle size="small" :icon="Plus" @click="handleAddOption" />
    </div>
    <div v-for="(item, index) in status" :key="index" class="flex align-items-center">
      <el-input placeholder="选项" class="mt-5 mb-5 mr-10" v-model="textArr[index]" />
      <el-button
        circle
        size="small"
        type="danger"
        :icon="Minus"
        @click="handleRemoveOption(index)"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { inject, ref } from 'vue';
import { Plus, Minus } from '@element-plus/icons-vue';
import type { UpdateStatus, VueComType } from '@/types';

const props = defineProps<{
  status: string[];
  isShow: boolean;
  configKey: string;
  editCom: VueComType;
  id: string;
}>();

const textArr = ref(props.status);
const updateStatus = inject<UpdateStatus>('updateStatus');

function handleAddOption() {
  if (updateStatus) updateStatus(props.configKey);
}
function handleRemoveOption(index: number) {
  if (updateStatus) updateStatus(props.configKey, index);
}
</script>
